Animated Navigation Bar
HTML CODE:-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <title></title> </head> <body> <div class="navbar"> <ul> <li class="list active"> <a href="#"> <span class="icon"><i class="fa-solid fa-house"></i></span> <span class="name">Home</span> </a> </li> <li class="list"> <a href="#"> <span class="icon"><i class="fa-solid fa-user"></i></span> <span class="name">User</span> </a> </li> <li class="list"> <a href="#"> <span class="icon"><i class="fa-solid fa-message"></i></span> <span class="name">Message</span> </a> </li> <li class="list"> <a href="#"> <span class="icon"><i class="fa-solid fa-phone"></i></span> <span class="name">Contact</span> </a> </li> <li class="list"> <a href="#"> <span class="icon"><i class="fa-solid fa-gear"></i></span> <span class="name">Setting</span> </a> </li> <div class="indicate"></div> </ul> </div> </body> </html> |
CSS CODE:-
body{ |
JS CODE:-
const list = document.querySelectorAll('.list'); function activeLink(){ list.forEach((item) => item.classList.remove('active')); this.classList.add('active'); } list.forEach((item) => item.addEventListener('click',activeLink)); |